﻿@theme: "../refs/";

@import "@{theme}variables.less";
@import "@{theme}mixins.less";

///*checkout module*/
.checkout-module {
    * {
        .box-sizing(content-box);
    }

    .checkout-header {
    }

    .btn-default {
        border: 2px solid rgba(147, 147, 147, 0.8);
        width:auto;
    }

    .message-error, .message {
        color: red;
    }

    .option-list {
        list-style: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .checkout-title {
        color: #333;
        display: inline-block;
        font-size: 2em;
        margin: 0 0 0 7px;
    }

    .title {
        background: #d5d5d5;
        color: darken(@gray,5%);
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        font-weight: bold;
        margin: 0;
    }

    .body {
        padding: 10px 2px;
    }

    .checkout-body {
        overflow: hidden;
    }

    .next-step-button {
        width: 400px;
        margin: 10px 0;
        font-weight: bold;
    }
}
// checkout steps
.order-progress {
    clear: both;
    height: 50px;
    margin: 35px 0 0 0;
    padding: 20px 0;
    position: relative;

    .step-wrap {
        position: relative;
        width: 19.5%;
        float: left;
        height: 50px;

        .step-active {
            position: absolute;
            color: #ffffff;
            line-height: 35px;
            .border-top-radius(20px);
            .border-left-radius(20px);
            .border-bottom-radius(20px);
            .border-right-radius(20px);
            border: 2px solid #d4d4d4;
            text-align: center;
            height: 35px;
            width: 35px;
            top: -17px;
            background-color: @brand-primary;

            a {
                display: block;
                width: 35px;
                height: 35px;
                color: #ffffff;
                text-decoration: none;
            }
        }

        .step-inactive {
            position: absolute;
            border: 1px solid @gray;
            background: #fff;
            color: #6e6e6e;
            line-height: 25px;
            .border-top-radius(15px);
            .border-left-radius(15px);
            .border-bottom-radius(15px);
            .border-right-radius(15px);
            text-align: center;
            height: 25px;
            width: 25px;
            left: -10px;
            top: -14px;
        }

        .step-text-active {
            position: absolute;
            bottom: 5px;
            left: -5px;
            text-align: center;
        }

        .step-text-inactive {
            position: absolute;
            bottom: 5px;
            text-align: center;
            color: @gray-light;
            font-size: 13px;
            left: -25px;
        }

        .step-line-active {
            width: 100%;
            position: absolute;
            height: 2px;
            background: @gray-dark;
        }

        .step-line-inactive {
            width: 100%;
            position: absolute;
            height: 2px;
            background: @gray-light;
        }

        &.step-1 .step-text-active {
            left: 5px;
        }

        &.step-6 {
            width: 0;

            .step-text-active {
                left: 5px;
            }
        }
    }
}

// order summary module.
.order-summary-content {
    overflow: hidden;

    .common-buttons {
        overflow: hidden;
        margin: 10px 0;

        .update-cart-button {
            width: 200px;
            float: left;
            border: 2px solid rgba(147, 147, 147, 0.8);
        }

        .continue-shopping-button {
            width: 200px;
            float: right;
            border: 2px solid rgba(147, 147, 147, 0.8);
            //background: #121212;
            //border: 2px solid rgba(102, 102, 102, 0.8);
        }
    }

    .left-side {
        float: left;
        width: 820px;
    }

    .right-side {
        float: left;
        width: 350px;

        .cart-sidebar {
            padding-left: 20px;

            .terms-box {
                padding: 5px;
                border: 1px solid #bbbbbb;
                margin: 5px 0;

                .read {
                    color: #ff7e12;
                    font-weight: bold;
                    cursor: pointer;
                    text-decoration: underline;
                }

                .terms-of-service {
                    line-height: 1.5em;
                }
            }
        }
    }
}
